<template>
	<view class="my-score">
		<view class="select">
			<van-dropdown-menu active-color="#1989fa">
				<van-dropdown-item :value="yearValue" :options="option2" @change="yearChange" />
			</van-dropdown-menu>
		</view>
		<view class="score-content">
			<view class="chuangxin score-item" @click="chuangxinClick(startYear,endYear)">
				<view class="left">
					创新分
				</view>
				<view class="right">
					<view>
						{{chuangxinScore}}
					</view>
				</view>
			</view>
			<view class="xueye score-item" @click="xueyeClick(startYear,endYear)">
				<view class="left">
					学业分
				</view>
				<view class="right">
					{{xueyeScore}}
				</view>
			</view>
			<view class="sixiang score-item" @click="sixiangClick(startYear,endYear)">
				<view class="left">
					思想分
				</view>
				<view class="right">
					{{sixiangScore}}
				</view>
			</view>
			<view class="wenti score-item" @click="wentiClick(startYear,endYear)">
				<view class="left">
					文体分
				</view>
				<view class="right">
					{{wentiScore}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getChuangxinScore,
		getXueyeScore,
		getSixiangScore,
		getWentiScore
	} from '@/config/api.js'

	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				option2: [{
						text: '2022-2023',
						value: '2022-2023'
					},
					{
						text: '2021-2022',
						value: '2021-2022'
					},
					{
						text: '2020-2021',
						value: '2020-2021'
					},
					{
						text: '2019-2020',
						value: '2019-2020'
					},
					{
						text: '全部学年',
						value: '全部学年'
					},
				],
				yearValue: '2022-2023',
				chuangxinScore: '',
				xueyeScore: '',
				sixiangScore: '',
				wentiScore: '',
				startYear: '',
				endYear: '',
				chuangxinList: [],
				xueyeList: [],
				sixaingList: [],
				wentiList: [],
			}
		},
		computed: {
			...mapGetters([
				'account'
			])
		},
		methods: {
			async yearChange(value) {
				if (value.detail === '2022-2023') {
					this.getFourScoreFn('2022-9-01', '2023-8-30')
					this.startYear = '2022-9-01'
					this.endYear = '2023-8-30'
				} else if (value.detail === '2021-2022') {
					this.getFourScoreFn('2021-9-01', '2022-8-30')
					this.startYear = '2021-9-01'
					this.endYear = '2022-8-30'
				} else if (value.detail === '2020-2021') {
					this.getFourScoreFn('2020-9-01', '2021-8-30')
					this.startYear = '2020-9-01'
					this.endYear = '2021-8-30'
				} else if (value.detail === '2019-2020') {
					this.getFourScoreFn('2019-9-01', '2022-8-30')
					this.startYear = '2019-9-01'
					this.endYear = '2022-8-30'
				} else if (value.detail === '全部学年') {
					this.getFourScoreFn('', '')
					this.startYear = ''
					this.endYear = ''
				}
			},

			async getFourScoreFn(startYear = '', endYear = '') {
				let paramsOpt = {
					userAccount: this.account,
					getStatus: 0,
					scoreApprovalStatus: 1,
				}
				startYear && Object.assign(paramsOpt, {
					startYear
				})
				endYear && Object.assign(paramsOpt, {
					endYear
				})
				const cRes = await getChuangxinScore({
					params: paramsOpt
				})
				if (cRes.hasOk) {
					this.chuangxinScore = cRes.data.chuangxinTotalScore
				}
				const xRes = await getXueyeScore({
					params: paramsOpt
				})
				if (xRes.hasOk) {
					this.xueyeScore = xRes.data.xueyeTotalScore
				}

				const sRes = await getSixiangScore({
					params: paramsOpt
				})
				if (sRes.hasOk) {
					this.sixiangScore = sRes.data.sixiangTotalScore
				}
				const wRes = await getWentiScore({
					params: paramsOpt
				})
				if (wRes.hasOk) {
					this.wentiScore = wRes.data.wentiTotalScore
				}
			},

			async chuangxinClick(startYear = '', endYear = '') {
				uni.navigateTo({
					url: `/pages/myScoreDetail/myScoreDetail?startYear=${startYear}&endYear=${endYear}&scoreType=0`
				});
			},

			async xueyeClick(startYear = '', endYear = '') {
				uni.navigateTo({
					url: `/pages/myScoreDetail/myScoreDetail?startYear=${startYear}&endYear=${endYear}&scoreType=1`
				});
			},

			async sixiangClick(startYear = '', endYear = '') {
				uni.navigateTo({
					url: `/pages/myScoreDetail/myScoreDetail?startYear=${startYear}&endYear=${endYear}&scoreType=2`
				});
			},

			async wentiClick(startYear = '', endYear = '') {
				uni.navigateTo({
					url: `/pages/myScoreDetail/myScoreDetail?startYear=${startYear}&endYear=${endYear}&scoreType=3`
				});
			},


			onShow() {
				this.startYear = '2022-9-01'
				this.endYear = '2023-8-30'
				this.yearValue = '2022-2023'
				this.getFourScoreFn(this.startYear, this.endYear)

			}
		}
	}
</script>

<style lang="scss" scoped>
	.score-content {
		width: 100%;
		box-sizing: border-box;
		padding: 20px;

		.score-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 20px;
			margin-bottom: 20px;
			border-radius: 8px;
			background-color: #fff;
			overflow: hidden;

			.left {
				font-weight: 700;
			}
		}

		.chuangxin {
			.right {
				height: 100%;
				width: 50px;
				padding: 30px 20px 30px 26px;
				background-color: #ee4646;
				font-size: 30px;
				text-align: center;
				// font-weight: 700;
				color: #fff;
			}
		}

		.xueye {
			.right {
				height: 100%;
				width: 50px;
				padding: 30px 20px 30px 26px;
				background-color: #9511e1;
				font-size: 30px;
				text-align: center;
				// font-weight: 700;
				color: #fff;
			}
		}

		.sixiang {
			.right {
				height: 100%;
				width: 50px;
				padding: 30px 20px 30px 26px;
				background-color: #e57411;
				font-size: 30px;
				text-align: center;
				// font-weight: 700;
				color: #fff;
			}
		}

		.wenti {
			.right {
				height: 100%;
				width: 50px;
				padding: 30px 20px 30px 26px;
				background-color: #34c9ff;
				font-size: 30px;
				text-align: center;
				// font-weight: 700;
				color: #fff;
			}
		}

	}
</style>